import { defineComponent, watch, shallowReactive, ref } from 'vue'
import * as echarts from 'echarts'

// 声明类型
const PropsType = {
	data: {
		type: Object,
		default: () => ({
			list: []
		}),
		require: true
	}
} as const

const sxnja = [
	93.67, 93.44, 94.34, 94.5, 
];
const minNumber = 90;
const minArray = [];
sxnja.map((value) => {
	minArray.push(parseFloat((value - minNumber).toFixed(2)))
})
console.log(minArray)
let xaxisData = [
	'水资源一级区间调水量',
	'提水工程供水量',
	'引水工程供水量',
	'蓄水工程供水量',
];

// 定义主体
export default defineComponent({
	props: PropsType,
	setup(props) {
		const chartRef = ref()
		// 配置项
		let options = {}
		watch(
			() => props.data,
			(val: any) => {
				options = {
					title: {
						text: '单位：万吨',
						top: '0%',
						left: '0%',
						textStyle: {
							fontSize: '10px',
							fontWeight: 300,
							color: '#B5C5D4',
							opacity: 0.8
						}
					},
					tooltip: {
						valueFormatter: function (value) {
							return (value + minNumber).toFixed(2) + ' %';
						}
					},
					grid: {
						left: '1%',
						right: '0%',
						top: '16%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: xaxisData,
						axisLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: '#545454'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#B5C5D4',
							fontSize: '10px',
							interval: 0
						}
					},
					yAxis: [
						{
							// type: 'value',
							// min: function (value) {
							//   return value.min*0.9;
							// },
							type: 'value',
							min: 0,
							max: 100 - minNumber,
							// max: yAxisMax,
							axisLine: {
								show: false,
								lineStyle: {
									width: 1,
									color: '#545454'
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: '#B2C2D3',
									opacity: 0.3,
									type: 'dotted'
								}
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: '#B5C5D4',
								fontSize: '12px',
								formatter: (value) => {
									return value + minNumber
								}
							}
						}
					],
					series: [
						{
							name: '审限内结案率',
							data: minArray,
							type: 'pictorialBar',
							symbol: 'roundRect',
							symbolRepeat: true,
							symbolSize: [20, 7],
							// symbolOffset: symbolOffset,
							// barWidth:'40%',
							itemStyle: {
								color: 'rgba(15, 189, 200, 1)'
							}
						}
					]
				}
				// 手动触发更新
				if (chartRef.value) {
					// 通过初始化参数打入数据
					chartRef.value.initChart(options, true)
				}
			},
			{
				immediate: true,
				deep: true
			}
		)
		return () => {
			const height = "160px"
			const width = "448px"

			return <div>
				<echart ref={chartRef} options={options} height={height} width={width} />
			</div>
		}
	}
})

